<template>
  <el-dialog  title="短信模板" :visible.sync="dialogTemplateFormVisible" :close-on-click-modal="false">
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :refresh="{query: getTemplateList1}" >
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          row-key
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="templateList"
          width
          max-height="500"
          row-id="id"
          highlight-current-row
          text-algin="center"
          :print-config="{}"
          header-align="center"
          show-overflow
        >
          <vxe-table-column
            field="templateCode"
            width="180"
            align="center"
            title="模板代码"
          />
          <vxe-table-column
            field="templateName"
            width="180"
            align="center"
            title="模板名称"
          />
          <vxe-table-column
            title="模板类型"
            field="templateTypeDesc"
            align="center"
            width="120"
          />
          <vxe-table-column
            title="场景连接"
            field="typeLink"
            align="center"
            width="100"
          />
          <vxe-table-column
            title="备注"
            field="remark"
            align="center"
            width="250"
          />
          <vxe-table-column
            field="name"
            width="100"
            align="center"
            title="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.publishStatus"
                :inactive-value="0"
                :active-value="1"
                active-text
                inactive-text
                @change="changeTemplateState(scope)"
              />
            </template>
          </vxe-table-column>
          <vxe-table-column
            title="操作"
            fixed="right"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              <div class="drag-btn">
                <el-button
                  type="text"
                  size="mini"
                  @click="openTemplateDialog(scope.row.id)"
                >编辑</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="delTemplateClick(scope.row.id)"
                >删除</el-button>
              </div>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
      <el-dialog v-if="dialogTemplateEditVisible" width="50%" :close-on-click-modal="false" :visible.sync="dialogTemplateEditVisible" title="模板编辑">
        <el-form :model="templateParams" ref="ruleForm" label-width="7rem" :rules="templateRules">
          <el-row :gutter="40">
            <el-col :span="22">
              <el-form-item label="模板代码：" prop="templateCode">
                <el-input v-model="templateParams.templateCode" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="模板名称：" prop="templateName">
                <el-input v-model="templateParams.templateName" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="模板类型：" prop="templateType">
                <el-input v-model="templateParams.templateType" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="场景连接：" prop="typeLink" >
                <el-input v-model="templateParams.typeLink" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="备注：" prop="remark">
                <el-input v-model="templateParams.remark" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTemplateEditVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitTemplate">确 定</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTemplateFormVisible = false">关 闭</el-button>
      </div>
   </el-dialog>
</template>

<script>
import { listSmsTemplateByConfigId,delSmsTemplate,viewSmsTemplate,modifySmsTemplate,addSmsTemplate,changeSmsTemplateStatus } from '@/api/messageSetting'
export default {
  components: {
  },
  props: {
    configId: {
      required: false,
      type: String,
      default: ''
    },
    vendorCode: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogTemplateFormVisible: false,
      dialogTemplateEditVisible: false,
      templateParams: {
        id: '',
        configId: '',
        tenantId:'',
        signId:'',
        smsVendorCode:'',
        templateName:'',
        templateCode:'',
        templateContent:'',
        templateType:'',
        typeLink: '',
        remark: ''
      },
      templateRules: {
        templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
        templateCode: [{ required: true, message: '模板代码', trigger: 'blur' }]
      },
      templateList: [],
      templateFlag:true
    }
  },
  methods: {
    changeTemplateState(scope){
      changeSmsTemplateStatus({id:scope.row.id, status:scope.row.publishStatus}).then(res =>{
        if (res) {
          this.$message.success('修改成功!')
          this.getTemplateList()
        } else {
          this.$message.error('修改失败!')
          this.getTemplateList()
        }
      })
    },
    init() {
      this.getTemplateList()
    },
    getTemplateList1(){
       this.getTemplateList()
    },
    getTemplateList() {
      if(this.configId){
        listSmsTemplateByConfigId(this.configId).then(res =>{
          if(res){
            if(res.code){
              this.$message.error(`${res.msg}`);
            }else{
              this.templateList = res
            }
          }
        })
      }else{
        this.templateParams = {}
        this.dialogTemplateFormVisible = true
      }
    },
    openTemplateDialog(id) {
      this.dialogTemplateEditVisible = true
      if(id){
        this.templateFlag = true
        viewSmsTemplate(id).then(res =>{
          if(res){
            if(res.code){
              this.$message.error(`${res.msg}`);
            }else{
              this.templateParams = res
            }
          }
        })
      }else{
        this.templateFlag = false
        Object.keys(this.templateParams).forEach(key => {this.templateParams[key] = ""})
      }
    },
    // 删除
    delTemplateClick(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delSmsTemplate(id).then(res => {
          this.$message.success('删除成功!')
          this.getTemplateList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 保存
    submitTemplate(){
       this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(this.templateFlag){
            modifySmsTemplate(this.templateParams).then(res=>{
              if(res){
                if(res.code){
                  this.$message.error(`${res.msg}`)
                }else{
                  this.$message.success('修改成功!')
                  this.getTemplateList()
                  this.dialogTemplateEditVisible = false
                }
              }
            })
          }else{
            addSmsTemplate(this.templateParams).then(res=>{
              if(res){
                if(res.code){
                  this.$message.error(`${res.msg}`)
                }else{
                  this.$message.success('添加成功!')
                  this.getTemplateList()
                  this.dialogTemplateEditVisible = false
                }
              }
            })
          }
        }
       })
    }
  }
}
</script>
<style lang="scss" scoped>
  .p-l-r{
    padding:0 5px;
  }
</style>>
